<template>
    <div @mouseleave="handleHideMenu">
        <div v-for="(menu, index) in menus" :key="index">
            <div class="content-span level-1" @click="() => $emit('changeMenu', index)">
                {{ menu.title }}
            </div>
            <div v-for="subTitle in menu.subTitles" :key="subTitle" @click="() => $emit('changeMenu', index, subTitle)">
                <div class="content-span level-2">
                    {{ subTitle }}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'NavMenu',
    props: {
        menus: [],
        showMenu: Function,
        hideMenu: Function
    },
    methods: {
        handleShowMenu() {
            this.$emit("showMenu");
        },
        handleHideMenu() {
            this.$emit("hideMenu");
        }
    }
}
</script>

<style scoped>
.content-span {
    cursor: pointer;
    padding: 10px 8px;
}

.level-1 {
    font-weight: 700;
}

.level-2 {
    margin-left: 20px;
}
</style>